<template>
  <div
    class="main-sidebar"
    :class="collapsed ? 'sidebar-close' : 'sidebar-expand'"
  >
    <a-menu
      v-model="defaultSelectedKeys"
      :defaultOpenKeys="defaultOpenKeys"
      mode="inline"
      theme="dark"
      :inlineCollapsed="collapsed"
      :inlineIndent="12"
      @select="selectMenu"
    >
      <template v-for="item in list">
        <a-menu-item
          v-if="!item.children"
          :key="item.menuId.toString()"
          @click="$router.push(item.menuLink)"
        >
          <a-icon :type="item.menuIcon ? item.menuIcon : 'setting'" />
          <span>{{ item.menuName }}</span>
        </a-menu-item>
        <sub-menu :key="item" v-else :menu-info="item" />
      </template>
    </a-menu>
  </div>
</template>

<script>
import { mapState } from "vuex";
import SubMenu from "./SubMenu";
import { httpGet, SYS_GET_MENUS } from "../../api/api";

export default {
  components: {
    "sub-menu": SubMenu
  },
  data() {
    return {
      list: [],
      defaultSelectedKeys: [],
      defaultOpenKeys: localStorage.getItem("selectParentMenuId")
        ? JSON.parse(localStorage.getItem("selectParentMenuId"))
        : []
    };
  },
  computed: {
    ...mapState({
      collapsed: "collapsed"
    })
  },
  methods: {
    async getMenus() {
      this.list = await httpGet(SYS_GET_MENUS, null);
    },
    selectMenu({ key, selectedKeys }) {
      localStorage.setItem("selectMenuId", key.toString());
      this.defaultSelectedKeys = selectedKeys;
      const list = key.split("-");
      if (list.length > 1) {
        list.splice(list.length - 1, 1);
        const selectParentMenuId = this.getParentKey(list);
        localStorage.setItem(
          "selectParentMenuId",
          JSON.stringify(selectParentMenuId)
        );
      } else {
        localStorage.removeItem("selectParentMenuId");
      }
    },
    getParentKey(data) {
      if (data) {
        let list = [];
        let temp = "";
        for (let i = 0; i < data.length; i++) {
          if (temp) {
            temp = temp + "-" + data[i];
          } else {
            temp = data[i];
          }
          list.push(temp);
        }
        return list;
      }
      return [];
    },
    dealMenuKeys(data, parentKey) {
      if (data) {
        for (let i = 0; i < data.length; i++) {
          if (parentKey) {
            data[i].menuId = parentKey + "-" + data[i].menuId;
          }
          if (data[i].children) {
            this.dealMenuKeys(data[i].children, data[i].menuId);
          }
        }
      }
    }
  },
  async created() {
    await this.getMenus();
    console.log(this.$route.path);
    let menuId = "";
    this.list.forEach(item => {
      if (item.menuLink === this.$route.path) {
        menuId += item.menuId;
      }
    });
    this.defaultSelectedKeys = [menuId];
  }
};
</script>

<style scoped lang="less">
.main-sidebar {
  /*background-color: #ffffff;*/
  background-color: #000c17;
  position: fixed;
  top: 50px;
  left: 0;
  bottom: 0;
  height: calc(100vh - 50px);
  z-index: 200;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  overflow: auto;
}

.main-sidebar::-webkit-scrollbar {
  width: 4px;
}

.main-sidebar::-webkit-scrollbar-thumb {
  background: #004e9b;
  border-radius: 2px;
}

.sidebar-expand {
  width: 180px;
}

.sidebar-close {
  width: 44px;
}

.sidebar-close .ant-menu-inline-collapsed {
  width: 44px;
}

.ant-menu-inline-collapsed .ant-menu-item {
  padding: 0 14px !important;
}

.ant-menu-vertical .ant-menu-submenu {
  margin-left: -18px;
}
</style>
